﻿@using Nop.Core.Domain.Catalog
@using Nop.Services
@model ProductModel

<div class="panel-group">
    <p>
        @T("Admin.Catalog.Products.SpecificationAttributes.Hint")
    </p>
    @if (Model.Id > 0)
    {
        /*hide "add spec" table if no attributes are defined*/
        if (Model.AddSpecificationAttributeModel.AvailableAttributes.Count > 0)
        {
            <div class="panel panel-default">
                <div class="panel-body">
                    <div id="specificationattributes-grid"></div>

                    <script>
                        $(document).ready(function() {
                            $("#specificationattributes-grid").kendoGrid({
                                dataSource: {
                                    type: "json",
                                    transport: {
                                        read: {
                                            url: "@Html.Raw(Url.Action("ProductSpecAttrList", "Product", new {productId = Model.Id}))",
                                            type: "POST",
                                            dataType: "json",
                                            data: addAntiForgeryToken
                                        },
                                        update: {
                                            url: "@Html.Raw(Url.Action("ProductSpecAttrUpdate", "Product"))",
                                            type: "POST",
                                            dataType: "json",
                                            data: addAntiForgeryToken
                                        },
                                        destroy: {
                                            url: "@Html.Raw(Url.Action("ProductSpecAttrDelete", "Product"))",
                                            type: "POST",
                                            dataType: "json",
                                            data: addAntiForgeryToken
                                        }
                                    },
                                    schema: {
                                        data: "Data",
                                        total: "Total",
                                        errors: "Errors",
                                        model: {
                                            id: "Id",
                                            fields: {
                                                //ProductId: { editable: false, type: "number" },
                                                AttributeTypeName: { editable: false, type: "string" },
                                                AttributeName: { editable: false, type: "string" },
                                                ValueRaw: { editable: true, type: "string" },
                                                AllowFiltering: { editable: true, type: "boolean" },
                                                ShowOnProductPage: { editable: true, type: "boolean" },
                                                DisplayOrder: { editable: true, type: "number" },
                                                Id: { editable: false, type: "number" }
                                            }
                                        }
                                    },
                                    requestEnd: function(e) {
                                        if (e.type == "update") {
                                            this.read();
                                        }
                                    },
                                    error: function(e) {
                                        display_kendoui_grid_error(e);
                                        // Cancel the changes
                                        this.cancelChanges();
                                    },
                                    serverPaging: true,
                                    serverFiltering: true,
                                    serverSorting: true
                                },
                                pageable: {
                                    refresh: true,
                                    numeric: false,
                                    previousNext: false,
                                    info: false,
                                    @Html.Partial("_GridPagerMessages")
                                },
                                editable: {
                                    confirmation: "@T("Admin.Common.DeleteConfirmation")",
                                    mode: "inline"
                                },
                                scrollable: false,
                                columns: [
                                    {
                                        field: "AttributeTypeName",
                                        title: "@T("Admin.Catalog.Products.SpecificationAttributes.Fields.AttributeType")",
                                        width: 150
                                    }, {
                                        field: "AttributeName",
                                        title: "@T("Admin.Catalog.Products.SpecificationAttributes.Fields.SpecificationAttribute")",
                                        width: 200
                                    }, {
                                        field: "ValueRaw",
                                        title: "@T("Admin.Catalog.Products.SpecificationAttributes.Fields.Value")",
                                        width: 200,
                                        encoded: false,
                                        editor: function setDropDownEditor(container, options) {
                                                    if (options.model.AttributeTypeId == @((int)SpecificationAttributeType.Option)) {
                                                        var dropDownList = $('<input required data-text-field="Name" data-value-field="Id" data-bind="value:ValueRaw"/>')
                                                            .appendTo(container).kendoDropDownList().data("kendoDropDownList");
                                                        $.ajax({
                                                            type: "GET",
                                                            url: "@(Url.Action("GetOptionsByAttributeId", "SpecificationAttribute"))",
                                                            data: { "attributeId": options.model.AttributeId },
                                                            success: function (data) {
                                                                var availableOptions = [];
                                                                $.each(data, function(id, option) {
                                                                    availableOptions.push({ Id: option.id, Name: option.name });
                                                                });
                                                                dropDownList.setDataSource(availableOptions);
                                                                dropDownList.select(function(item) {
                                                                    return item.Id === options.model.SpecificationAttributeOptionId;
                                                                });
                                                            }
                                                        });
                                                    }
                                                }
                                    }, {
                                        field: "AllowFiltering",
                                        title: "@T("Admin.Catalog.Products.SpecificationAttributes.Fields.AllowFiltering")",
                                        width: 150,
                                        headerAttributes: { style: "text-align:center" },
                                        attributes: { style: "text-align:center" },
                                        template: '# if(AllowFiltering) {# <i class="fa fa-check true-icon"></i> #} else {# <i class="fa fa-close false-icon"></i> #} #'
                                    }, {
                                        field: "ShowOnProductPage",
                                        title: "@T("Admin.Catalog.Products.SpecificationAttributes.Fields.ShowOnProductPage")",
                                        width: 150,
                                        headerAttributes: { style: "text-align:center" },
                                        attributes: { style: "text-align:center" },
                                        template: '# if(ShowOnProductPage) {# <i class="fa fa-check true-icon"></i> #} else {# <i class="fa fa-close false-icon"></i> #} #'
                                    },
                                    {
                                        field: "DisplayOrder",
                                        title: "@T("Admin.Catalog.Products.SpecificationAttributes.Fields.DisplayOrder")",
                                        width: 150,
                                        //integer format
                                        format: "{0:0}"
                                    }, {
                                        command: [
                                            {
                                                name: "edit",
                                                text: {
                                                    edit: "@T("Admin.Common.Edit")",
                                                    update: "@T("Admin.Common.Update")",
                                                    cancel: "@T("Admin.Common.Cancel")"
                                                }
                                            }, {
                                                name: "destroy",
                                                text: "@T("Admin.Common.Delete")"
                                            }
                                        ],
                                        width: 200
                                    }
                                ],
                                edit: function(e) {
                                    if (e.model.AttributeTypeId != @((int)SpecificationAttributeType.Option)) {
                                        e.container.find("input[name=AllowFiltering]").attr("disabled", true);
                                    }
                                }
                            });
                        });
                    </script>
                </div>
            </div>

            <div class="panel panel-default">
                <div class="panel-heading">
                    @T("Admin.Catalog.Products.SpecificationAttributes.AddNew")
                </div>
                <div class="panel-body">
                    <script type="text/javascript">
                        $(document).ready(function() {
                            $("#@Html.FieldIdFor(model => model.AddSpecificationAttributeModel.SpecificationAttributeId)").change(function() {
                                var selectedAttributeId = $(this).val();
                                $.ajax({
                                    cache: false,
                                    type: "GET",
                                    url: "@(Url.Action("GetOptionsByAttributeId", "SpecificationAttribute"))",
                                    data: { "attributeId": selectedAttributeId },
                                    success: function(data) {
                                        var ddlSpecOptions = $("#@Html.FieldIdFor(model => model.AddSpecificationAttributeModel.SpecificationAttributeOptionId)");
                                        ddlSpecOptions.html('');
                                        $.each(data, function(id, option) {
                                            ddlSpecOptions.append($('<option></option>').val(option.id).html(option.name));
                                        });
                                    },
                                    error: function(xhr, ajaxOptions, thrownError) {
                                        alert('Failed to retrieve specification options.');
                                    }
                                });
                            });
                        });

                        $(document).ready(function() {
                            $('#addProductSpec').click(function() {
                                var attributeTypeId = $("#@Html.FieldIdFor(model => model.AddSpecificationAttributeModel.AttributeTypeId)").val();
                                var specificationAttributeOptionId = $("#@Html.FieldIdFor(model => model.AddSpecificationAttributeModel.SpecificationAttributeOptionId)").val();
                                var customValue = $("#@Html.FieldIdFor(model => model.AddSpecificationAttributeModel.CustomValue)").val();
                                var allowFiltering = $("#@Html.FieldIdFor(model => model.AddSpecificationAttributeModel.AllowFiltering)").is(':checked');
                                var showOnProductPage = $("#@Html.FieldIdFor(model => model.AddSpecificationAttributeModel.ShowOnProductPage)").is(':checked');
                                var displayOrder = $("#@Html.FieldIdFor(model => model.AddSpecificationAttributeModel.DisplayOrder)").val();

                                if (specificationAttributeOptionId === null) {
                                    //some validation
                                    if (attributeTypeId == @(((int) SpecificationAttributeType.Option).ToString())) {
                                        //option
                                        alert('Select specification attribute option');
                                } else {
                                    //other (text, hyperlink, etc)
                                    alert('First, please create at least one specification attribute option');
                                }
                            } else {
                                    $('#addProductSpec').attr('disabled', true);

                            var postData = {
                                attributeTypeId: attributeTypeId,
                                specificationAttributeOptionId: specificationAttributeOptionId,
                                customValue: customValue,
                                allowFiltering: allowFiltering,
                                showOnProductPage: showOnProductPage,
                                displayOrder: displayOrder,
                                productId: @(Model.Id)
                                };
                            addAntiForgeryToken(postData);

                            $.ajax({
                                cache: false,
                                type: "POST",
                                url: "@(Url.Action("ProductSpecificationAttributeAdd", "Product"))",
                                data: postData,
                                success: function(data) {
                                    var grid = $("#specificationattributes-grid").data('kendoGrid');
                                    grid.dataSource.read();
                                    $('#addProductSpec').attr('disabled', false);
                                },
                                error: function(xhr, ajaxOptions, thrownError) {
                                    alert('Failed to add specification attribute.');
                                    $('#addProductSpec').attr('disabled', false);
                                }
                            });
                        }
                        });
                        });


                        $(document).ready(function() {
                            $("#@Html.FieldIdFor(model => model.AddSpecificationAttributeModel.AttributeTypeId)").change(toggleAttributeType);
                            toggleAttributeType();
                        });

                        function toggleAttributeType() {
                            var selectedTypeId = $("#@Html.FieldIdFor(model => model.AddSpecificationAttributeModel.AttributeTypeId)").val();
                            if (selectedTypeId == @(((int) SpecificationAttributeType.Option).ToString())) {
                                $('#pnlSpecificationAttributeOptionId').show();
                            $('#pnlCustomValue').hide();
                            $('#pnlAllowFiltering').show();
                        } else if (selectedTypeId == @(((int) SpecificationAttributeType.CustomText).ToString())) {
                            $('#pnlSpecificationAttributeOptionId').hide();
                            $('#pnlCustomValue').show();
                            $('#pnlAllowFiltering').hide();
                        } else if (selectedTypeId == @(((int) SpecificationAttributeType.CustomHtmlText).ToString())) {
                            $('#pnlSpecificationAttributeOptionId').hide();
                            $('#pnlCustomValue').show();
                            $('#pnlAllowFiltering').hide();
                        } else if (selectedTypeId == @(((int) SpecificationAttributeType.Hyperlink).ToString())) {
                            $('#pnlSpecificationAttributeOptionId').hide();
                            $('#pnlCustomValue').show();
                            $('#pnlAllowFiltering').hide();
                        }
                        }
                    </script>

                    <div class="form-group">
                        <div class="col-md-3">
                            @Html.NopLabelFor(model => model.AddSpecificationAttributeModel.AttributeTypeId)
                        </div>
                        <div class="col-md-9">
                            @Html.NopDropDownListFor(model => model.AddSpecificationAttributeModel.AttributeTypeId, ((SpecificationAttributeType)Model.AddSpecificationAttributeModel.AttributeTypeId).ToSelectList())
                            @Html.ValidationMessageFor(model => model.AddSpecificationAttributeModel.AttributeTypeId)
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-3">
                            @Html.NopLabelFor(model => model.AddSpecificationAttributeModel.SpecificationAttributeId)
                        </div>
                        <div class="col-md-9">
                            @Html.NopDropDownListFor(model => model.AddSpecificationAttributeModel.SpecificationAttributeId, Model.AddSpecificationAttributeModel.AvailableAttributes)
                            @Html.ValidationMessageFor(model => model.AddSpecificationAttributeModel.SpecificationAttributeId)
                        </div>
                    </div>
                    <div class="form-group" id="pnlSpecificationAttributeOptionId">
                        <div class="col-md-3">
                            @Html.NopLabelFor(model => model.AddSpecificationAttributeModel.SpecificationAttributeOptionId)
                        </div>
                        <div class="col-md-9">
                            @Html.NopDropDownListFor(model => model.AddSpecificationAttributeModel.SpecificationAttributeOptionId, Model.AddSpecificationAttributeModel.AvailableOptions)
                            @Html.ValidationMessageFor(model => model.AddSpecificationAttributeModel.SpecificationAttributeOptionId)
                        </div>
                    </div>
                    <div class="form-group" id="pnlCustomValue">
                        <div class="col-md-3">
                            @Html.NopLabelFor(model => model.AddSpecificationAttributeModel.CustomValue)
                        </div>
                        <div class="col-md-9">
                            @Html.NopEditorFor(model => model.AddSpecificationAttributeModel.CustomValue)
                            @Html.ValidationMessageFor(model => model.AddSpecificationAttributeModel.CustomValue)
                        </div>
                    </div>
                    <div class="form-group" id="pnlAllowFiltering">
                        <div class="col-md-3">
                            @Html.NopLabelFor(model => model.AddSpecificationAttributeModel.AllowFiltering)
                        </div>
                        <div class="col-md-9">
                            @Html.NopEditorFor(model => model.AddSpecificationAttributeModel.AllowFiltering)
                            @Html.ValidationMessageFor(model => model.AddSpecificationAttributeModel.AllowFiltering)
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-3">
                            @Html.NopLabelFor(model => model.AddSpecificationAttributeModel.ShowOnProductPage)
                        </div>
                        <div class="col-md-9">
                            @Html.NopEditorFor(model => model.AddSpecificationAttributeModel.ShowOnProductPage)
                            @Html.ValidationMessageFor(model => model.AddSpecificationAttributeModel.ShowOnProductPage)
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-3">
                            @Html.NopLabelFor(model => model.AddSpecificationAttributeModel.DisplayOrder)
                        </div>
                        <div class="col-md-9">
                            @Html.NopEditorFor(model => model.AddSpecificationAttributeModel.DisplayOrder)
                            @Html.ValidationMessageFor(model => model.AddSpecificationAttributeModel.DisplayOrder)
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-9 col-md-offset-3">
                            <button type="button" id="addProductSpec" class="btn btn-primary">@T("Admin.Catalog.Products.SpecificationAttributes.AddButton")</button>
                        </div>
                    </div>
                </div>
            </div>
        }
        else
        {
            <div class="panel panel-default">
                <div class="panel-body">
                    @T("Admin.Catalog.Products.SpecificationAttributes.NoAttributes")
                </div>
            </div>
        }
    }
    else
    {
        <div class="panel panel-default">
            <div class="panel-body">
                @T("Admin.Catalog.Products.SpecificationAttributes.SaveBeforeEdit")
            </div>
        </div>
    }
</div>
